<template lang="pug">
el-scrollbar(:native="false")
    el-dialog(:visible="true" :show-close="false" top="0" :modal="false")
        template(slot="title")
            .title
                slot(name="title")
                    | {{i18n.title}}
            slot(name="close")
                .logo
        slot
</template>

<script lang="coffee">
import Vue from 'vue'
import {Scrollbar,Dialog} from 'element-ui'
[Scrollbar,Dialog].forEach (e)-> Vue.use(e)

module.exports = {
}
</script>
<style lang="scss" scoped>
.el-scrollbar{
min-height:100%;
background:linear-gradient(0deg,white 0, whitesmoke 100%);

/deep/ {
.el-dialog__header{
.el-icon-close{
    text-indent: 1px;
    height: 22px;
    width: 27px;
    border-radius: 27px;
    float: right;
    font-size: 15px;
    text-align: center;
    line-height: 21px;
    box-sizing: border-box;
    display: block;
    margin-top: 0;
}
.el-icon-close{
    color:#FCFDFE;
    border: 1px solid #FCFDFE;
    &:hover{
        color:#444;
        border-color:#FECD59;
        background-color:#FECD59;
    }
}
}
h2{
    padding-bottom: 1px;
    letter-spacing: 3px;
    padding-top: 1px;
    text-align:center;
}

$dy:#444;
input{
    border:0;
    width: 100%;
    padding: 0;
    box-sizing:border-box;
    color:#999;
    border-bottom:1px solid #999;
    line-height:51px;
    &::placeholder{
        color:#999;
        display:inline-block !important;
    }
    & ~ label{color:#999;pointer-events:none;}
    & ~ label.txt{
        line-height:51px;
        position:absolute;
        left:0;
        top:0;
        transition:.2s ease all;
    }
    &:focus, &:hover{
        border-color:$dy;
        color:$dy;
        & ~ label{
            color:$dy;
            border-color:$dy;
        }
        &::placeholder{
            color:#ccc;
        }
    }
    &:focus ~ label.txt,
    &:not(:placeholder-shown) ~ label.txt {
        font-size:12px;
        top:-23px;
    }
    &:not(:placeholder-shown) ~ label.txt {
        color:#aaa;
    }
    &:focus {
        border-color:#3A6AD2;
    }
    &:focus ~ label, &:not(:placeholder-shown):focus ~ label.txt {
        color:#3A6AD2;
    }
}
input:disabled{
    border-color:#aaa;
}
input:disabled+label,input:disabled{
    cursor:not-allowed;
    color:#aaa;
}
.el-dialog__header,input{
    font-size: 16px;
}
.P.label{
    display:flex;
    label{
        order:-1;
        border:0;
        text-align:left;
        cursor:text;
        padding:0 14px 0 0;
        line-height: 52px;
        word-break: keep-all;
        font-size: 27px;
        border-bottom-width: 2px;
        border-bottom-style: solid;
    }
}
input,.el-dialog__header{
    margin:0;
    padding:0;
}
.I-loading{
margin:90px 0 43px;
}
.P{
    margin:16px 32px;
    padding:0;
    position:relative;
}
.BTN.P{
    margin-top:36px;
    margin-bottom:36px;
}
.P label.I{
    position: absolute;
    right: 0;
    font-size:16px;
    font-weight:bold;
    top: 12px;
}
.el-scrollbar__view,.el-scrollbar__wrap{
    min-height:100%;
}
.el-scrollbar__view{
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.ERR{
right: 0;
margin-top: 20px;
border-radius: 19px;
float: left;
position: relative;
}
.ERR:before{
content: "";
border-top: 1px solid #FFEEEE;
height: 12px;
width: 12px;
display: block;
border-right: 1px solid #FFEEEE;
position: absolute;
top: -6px;
background: #FFEEEE;
transform: rotate(45deg);
left: 20px;
}
.el-dialog{
width: 400px;
margin:auto;
box-shadow: 0 0 10px rgba(0,0,0,.05);
}
.el-dialog__wrapper{
    position:static!important;
    margin:16px 0;
    .logo{
        height: 16px;
        width: 16px;
        background: url(~file/img/logo_ico.svg) 0 0/16px 16px no-repeat;
        float: right;
    }
    .el-dialog__body{
        //box-shadow: 0 3px 3px #333;
        background: linear-gradient(0deg,rgb(245, 245, 245) 0%,rgb(255, 255, 255) 100%);
        border:1px solid #E9EEFA;
        border-top:0;
        overflow: hidden;
        margin-bottom:10px;
    }
    .el-dialog__header{
        margin-top:10px;
        //box-shadow: 0 0 3px #333 inset;
        padding:0 32px;
        height:52px;

        display: flex;
        align-items: center;
        justify-content: space-between;

        background:#3A6AD2;

        border: 1px solid #e9eefa;
        border-bottom:0;
        color:#FCFDFE;
        .title{
            display:inline;
        }
    }
    .P.OOPS{
        label.I{
            color:#d20;
        }
        input:focus+label.I{
            color:#c00;
            border-color:#c00;
        }
        input:hover+label.I{
            color:#f00;
            border-color:#f00;
        }

    }
}
@media screen and (max-width: 400px) {
.el-dialog{
width:100%;
.el-dialog__body{
    border-left:0;
    border-right:0;
}
.el-dialog__header{
    border-left:0;
    border-right:0;
}
}
}
}
}
</style>
